<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <div class="title">
          <img src="@/assets/icons/审核.png" alt="review" class="icon">
          <span>会议审核</span>
          <el-button type="primary" style="position: absolute;right: 0;top: 0;" @click="handleArrange">自动排会议室</el-button>
        </div>
      </el-col>
    </el-row>

    <div class="top">
      <el-select v-model="status" @change="changeStatus($event)">
        <el-option
          v-for="item in meetingStatus"
          :key="item.label"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </div>
    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="会议编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会议主题" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.theme }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="起止时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会议室编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.room }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sponsorDetail.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会议预期人数" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.expectsize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否需要签到" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.attendance ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会议状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核" align="center" class-name="small-padding fixed-width" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.expired">
            <el-button v-if="scope.row.expired === 1" style="width: 10em" disabled type="info">会议进行中</el-button>
            <el-button v-if="scope.row.expired === 2" style="width: 10em" disabled type="info">会议已结束</el-button>
          </div>
          <div v-else>
            <el-button :disabled="scope.row.state !== '审核中' && scope.row.state !== '未通过审核'" style="width: 4rem" size="mini" type="success" @click="handleAllow(scope.$index,scope.row)">允许</el-button>
            <el-button :disabled="scope.row.state !== '审核中' && scope.row.state !== '已通过审核'" style="width: 4rem" size="mini" type="danger" @click="handleNotAllow(scope.$index,scope.row)">不允许</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { findMeeting, updateMeeting, autoArrange } from '@/api/meeting'
import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils'

export default {
  name: 'MrTable',
  directives: { waves },
  filters: {
    parseTime(time) {
      const date = new Date(time)
      return parseTime(date, '{y}-{m}-{d} {h}:{i}')
    }
  },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: undefined,
      page: 1,
      size: 20,
      listLoading: true,
      status: -1,
      meetingStatus: [
        {
          value: -1,
          label: '待审核的会议'
        },
        {
          value: 0,
          label: '审核已通过的会议'
        },
        {
          value: -2,
          label: '审核未通过的会议'
        },
        {
          value: 3,
          label: '所有会议'
        },
        {
          value: 4,
          label: '进行中的会议'
        },
        {
          value: 5,
          label: '已结束的会议'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeStatus(status) {
      this.page = 1
      this.getList()
    },
    async getList() {
      this.listLoading = true
      let res
      if (this.status >= 4) {
        res = await findMeeting(3, 1000, this.page - 1)
      } else {
        res = await findMeeting(this.status, this.size, this.page - 1)
      }
      // console.log('state:', state)
      this.list = res.data.data.content
      this.total = res.data.data.totalElements
      this.list.forEach(data => {
        // console.log(`data:`, data)
        this.transformState(data)
        data.date = parseTime(data.starttime, '{y}-{m}-{d}')
        data.time = `${parseTime(data.starttime, '{h}:{i}')}-${parseTime(data.endtime, '{h}:{i}')}`
      })
      if (this.status >= 4) {
        this.list = this.list.filter(l => l.expired === this.status - 3)
      }

      if (this.status === -1) {
        this.list = this.list.filter(l => !l.expired)
      }

      this.list.reverse()
      // console.log('list:', this.list)
      setTimeout(() => {
        this.listLoading = false
      }, 0.7 * 1000)
    },
    handleAllow(index, row) {
      const state = 0
      const meeting = { id: row.id, state }
      updateMeeting(meeting).then(res => {
        if (res.data.code === 0) {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getList(this.status)
        }
      })
    },
    handleNotAllow(index, row) {
      const state = -2
      const meeting = { id: row.id, state }
      updateMeeting(meeting).then(res => {
        if (!res.data.code) {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getList(this.status)
        }
      })
    },
    async handleArrange() {
      const res = await autoArrange()
      if (!res.data.code) {
        this.$notify({
          title: '成功',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      }
    },
    transformState(data) {
      const d = new Date()
      if (d.getTime() / 1000 > data.endtime) {
        data.expired = 2
      } else if (d.getTime() / 1000 > data.starttime) {
        data.expired = 1
      }
      if (data.adjust === 0) {
        data.room = '安排中'
      }
      switch (data.state) {
        case -1:
          data.state = '审核中'
          break
        case 0:
          data.state = '已通过审核'
          break
        case -2:
          data.state = '未通过审核'
          break
        case -3:
          data.state = '已取消'
          break
        default:
          break
      }
    },
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.getList(this.status)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList(this.status)
    }
  }
}

</script>

<style scoped>
.top {
  float: right;
  margin-top: 20px;
  padding-bottom: 20px;
}

.pagination-container {
  background: #fff;
  padding: 32px 16px;
}

.pagination-container.hidden {
  display: none;
}
</style>
